<template>
    <base-panel>
    <el-container>
        <el-aside>
            <el-input type="text" v-model="name" clearable @input="getCategoryList" size="small"/>
            <div class="dept_tree">
            <el-tree ref="treeBox" :data="categoryList" :props="defaultProps" @node-click="handleNodeClick" :loading="loading" :highlight-current="true"></el-tree>
            </div>
        </el-aside>
        <el-main style="padding-top:8px">
            <user-table ref="userTable" :params="{dept:this.dept_id}"></user-table>
        </el-main>
    </el-container>
    </base-panel>
</template>
<script>
    import XEUtils from "xe-utils";
    import user from "@/api/systemManagement/user/index";
    import UserTable from "./userTable/index";
    import { handleTree } from "@/utils/common";
    export default {
        components: {UserTable},
        data() {
            return {
                loading:false,
                name: "",
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                categoryList:[],
                templateList:[],
                dept_id:undefined,
                visible:false,
                currRow:{}
            };
        },
        created() {
            this.getCategoryList()
        },
        methods: {
            showDetailDialog(row){
                this.visible = true
                this.currRow = row
            },
            handleNodeClick(tab, event) {
                this.dept_id = tab.id
                this.query({dept:this.dept_id})
            },
            getCategoryList() {
                this.loading = true;
                user.getSimpleDeptList({name:this.name}).then(res => {
                    let list =  res.data
                    this.categoryList = this.name?list:handleTree(list, "id", "parent_dept");
                    if(this.categoryList.length>0){
                        this.dept_id = this.categoryList[0].id
                    }
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                });
            },
            query(queryData){
                this.$refs["userTable"].getList(queryData);
            }

        }
    };
</script>
<style lang="scss" scoped>
    .el-aside {
        border: 1px solid #D3DCE6;
        width: 30%!important;
        max-width: 300px;
    }

    .el-main {
        padding: 0 20px;
        border: 1px solid #D3DCE6;
        border-left: none;
        .icon-list {
            display: flex;
            flex-wrap: wrap;
        }
    }
    aside {
        margin-bottom: 0px;
        background: transparent;
        padding: 0;
        >.el-input{
            width: calc(100% - 40px);
            margin: 8px 20px 10px;
        }
        >.dept_tree{
            height: calc(100vh - 280px);
            overflow-y: scroll;
            padding: 0px 12px 0px 20px;
        }
    }
</style>
